<template>
  <div class="app-container">
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <h3>商务管理</h3>
      <el-button type="warning" size="small" @click="handleBatchAudit"
        >批量审核</el-button
      >
    </div>
    <!-- 自定义下划线，替代el-divider -->
    <div class="custom-divider" />

    <!-- 操作按钮区域 -->
    <div class="table-operations-wrapper">
      <div class="table-operations">
        <el-form
          ref="searchForm"
          :model="listQuery"
          :inline="true"
          label-width="90px"
        >
          <el-form-item label="负责人:">
            <el-select
              v-model="listQuery.directorId"
              placeholder="请选择负责人"
              clearable
              filterable
              remote
              @focus="onDirectorFocus"
              :remote-method="remoteSearchDirectors"
              :loading="directorLoading"
              style="width: 200px"
              @change="handleDirectorChange"
            >
              <el-option
                v-for="item in directorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="申请时间:">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              style="width: 350px"
              @change="handleDateChange"
            />
          </el-form-item>

          <el-form-item label="状态:">
            <el-select
              v-model="listQuery.status"
              placeholder="请选择状态"
              clearable
              style="width: 150px"
              @change="handleStatusChange"
            >
              <el-option label="待审核" :value="0" />
              <el-option label="已审核" :value="1" />
              <el-option label="未通过" :value="-1" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleFilter">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
            >{{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            ></i>
          </el-button> -->

        <!-- 添加批量审核按钮 -->

        <!-- <el-button type="warning" size="small" @click="handleBatchAudit"
            >批量审核</el-button
          > -->
        <!-- <el-button size="small" type="success" @click="handleAdd">
            <i class="el-icon-plus"></i>
            新增
          </el-button> -->
        <!-- <el-button type="warning" size="small" @click="handleEdit">
            <i class="el-icon-edit"></i>
            修改
          </el-button> -->
        <!-- <el-button type="danger" size="small" @click="handleDelete">
            <i class="el-icon-delete"></i>
            批量删除
          </el-button> -->
      </div>

      <!-- 购物单录入区域 -->
      <div class="shopping-entry">
        <!-- <div class="entry-buttons">
          <el-button class="circle-btn" icon="el-icon-s-order">
            购货订单草稿
          </el-button>
          <el-button class="circle-btn" icon="el-icon-s-order">
            购货订单明细录入
          </el-button>
        </div> -->

        <!-- <div class="attachment-info">
            <el-link type="primary" class="upload-link">
              <i class="el-icon-paperclip"></i> 上传附件
            </el-link>
            <span class="order-number">单据编号: GHDD202503240001</span>
          </div> -->
      </div>
    </div>

    <!-- 商品表格区域 -->
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="demandList"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column `
        type="index"
        label="序号"
        width="100"
        align="center"
      ></el-table-column> -->
      <el-table-column
        type="selection"
        width="50"
        align="center"
        :selectable="(row) => row.processStatus === 0"
      />
      <el-table-column align="center" type="index" label="序号" width="100">
      </el-table-column>

      <el-table-column label="商品明细" width="470" align="center">
        <template slot-scope="scope">
          <div
            v-if="scope.row.list && scope.row.list.length > 0"
            class="goods-detail-container"
          >
            <!-- 将每个商品项水平排列 -->
            <div
              v-for="(item, index) in scope.row.list"
              :key="index"
              class="goods-item"
            >
              <!-- 商品名称 -->
              <div class="goods-name">{{ item.goodsName }}</div>

              <!-- 商品类型 -->
              <div class="goods-type">{{ item.goodsTypeName }}</div>

              <!-- 数量 -->
              <div class="goods-number">
                数量: <span class="number-value">{{ item.number }}</span>
              </div>

              <!-- 价格 -->
              <div class="goods-money">
                ¥<span class="money-value">{{ item.money }}</span>
              </div>
            </div>
          </div>
          <div v-else class="no-goods">暂无商品</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="directorName" label="负责人" width="120" />

      <el-table-column align="center" prop="needDepartmentName" label="部门" width="120" />

      <el-table-column align="center" prop="operatorName" label="操作人" width="120" />

      <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip/>

      <el-table-column align="center" prop="processStatus" label="状态">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.processStatus)">
            {{ getStatusText(scope.row.processStatus) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="createTime" label="创建时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.createTime | dateFormat }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="prop" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="small"
            :disabled="scope.row.processStatus !== 0"
            @click="handleAudit(scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        background
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        style="text-align: right"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 合计行 -->
    <!-- <div class="summary-row">
        <div class="summary-label">合计:</div>
        <div style="flex-grow: 1"></div>
        <div style="margin-right: 15px">数量: {{ totalQuantity }}</div>
      </div> -->

    <!-- 分页组件 -->
    <el-row
      v-if="false"
      :gutter="10"
      style="margin-top: 20px"
      type="flex"
      justify="end"
    >
      <el-pagination
        background
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>

    <!-- 新增申请对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form
        ref="demandForm"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="商品" prop="goodsId">
          <el-select
            v-model="form.goodsId"
            placeholder="请选择商品"
            style="width: 100%"
          >
            <el-option
              v-for="item in goodsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="数量" prop="number">
          <el-input v-model="form.number" style="width: 100%" />
        </el-form-item>

        <el-form-item label="仓库" prop="warehouseId">
          <el-select
            v-model="form.warehouseId"
            placeholder="请选择仓库"
            style="width: 100%"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="负责人" prop="directorId">
          <el-select
            v-model="form.directorId"
            placeholder="请选择负责人"
            style="width: 100%"
          >
            <el-option
              v-for="item in directorList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="操作人" prop="operatorId">
          <el-input v-model="form.operatorId" placeholder="请输入操作人" />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog title="审核" :visible.sync="auditDialogVisible" width="500px">
      <el-form
        ref="auditForm"
        :model="auditForm"
        :rules="auditRules"
        label-width="150px"
      >
        <el-form-item label="审核结果" prop="result">
          <el-radio-group v-model="auditForm.result">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="suggest">
          <el-input
            v-model="auditForm.suggest"
            type="textarea"
            :rows="3"
            placeholder="请输入审核意见"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAudit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量审核对话框 -->
    <el-dialog
      title="批量审核"
      :visible.sync="batchAuditDialogVisible"
      width="500px"
    >
      <el-form
        ref="batchAuditForm"
        :model="batchAuditForm"
        :rules="auditRules"
        label-width="150px"
      >
        <el-form-item label="审核结果" prop="result">
          <el-radio-group v-model="batchAuditForm.result">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="suggest">
          <el-input
            v-model="batchAuditForm.suggest"
            type="textarea"
            :rows="3"
            placeholder="请输入审核意见"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="batchAuditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBatchAudit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  BusinessInspectByIdApi,
  selBusinessInspectListApi,
  ResourcesInspectByIdsApi,
} from "@/api/applyfor";
import { selGoodsListApi } from "@/api/goods";
import { selWarehouseListApi, selStaffListApi } from "@/api/system";

export default {
  name: "PurchaseDorder",
  data() {
    return {
      isFilterVisible: false, // 控制筛选区域显示/隐藏
      scanEnabled: false,
      orderData: {
        supplier: "",
        salesPerson: "",
        orderDate: "2025-03-24",
        deliveryDate: "2025-03-24",
        orderType: "purchase",
        deliveryAddress: "",
        remark: "",
        discountRate: "0",
        discountAmount: "0",
        discountedAmount: "0.00",
        deliveryMethod: "",
      },
      salesPersonOptions: [
        { value: "admin", label: "管理员" },
        { value: "zhangsan", label: "张三" },
        { value: "lisi", label: "李四" },
      ],
      addressOptions: [
        { value: "address1", label: "广州市天河区某某路123号" },
        { value: "address2", label: "深圳市南山区某某路456号" },
      ],
      deliveryMethodOptions: [
        { value: "express", label: "快递" },
        { value: "self", label: "自提" },
        { value: "delivery", label: "送货" },
      ],
      warehouseOptions: [
        { value: "warehouse1", label: "主仓库" },
        { value: "warehouse2", label: "次仓库" },
      ],
      tableData: [
        {
          id: 1,
          productName: "",
          productImage: "",
          brand: "",
          productRemark: "",
          attribute: "",
          unit: "",
          warehouse: "",
          availableStock: 0,
          quantity: 0,
          batchNumber: "",
          packageType: "whole",
        },
        {
          id: 2,
          productName: "",
          productImage: "",
          brand: "",
          productRemark: "",
          attribute: "",
          unit: "",
          warehouse: "",
          availableStock: 0,
          quantity: 0,
          batchNumber: "",
          packageType: "whole",
        },
        {
          id: 3,
          productName: "",
          productImage: "",
          brand: "",
          productRemark: "",
          attribute: "",
          unit: "",
          warehouse: "",
          availableStock: 0,
          quantity: 0,
          batchNumber: "",
          packageType: "whole",
        },
        {
          id: 4,
          productName: "",
          productImage: "",
          brand: "",
          productRemark: "",
          attribute: "",
          unit: "",
          warehouse: "",
          availableStock: 0,
          quantity: 0,
          batchNumber: "",
          packageType: "whole",
        },
        {
          id: 5,
          productName: "",
          productImage: "",
          brand: "",
          productRemark: "",
          attribute: "",
          unit: "",
          warehouse: "",
          availableStock: 0,
          quantity: 0,
          batchNumber: "",
          packageType: "whole",
        },
      ],
      // 新增表单
      addForm: {
        demandType: 1,
        demandMoney: 1,
      },
      totalQuantity: 0,
      multipleSelection: [],
      // 分页相关
      listQuery: {
        directorId: null, // 主管ID
        endTime: null, // 结束时间
        page: 1, // 当前页
        pageSize: 10, // 每页条数
        startTime: null, // 开始时间
        status: 0, // 状态
      },
      // 查询参数
      goodsQuery: {
        goodsTypeId: null,
        name: "",
        page: 1,
        pageSize: 9999,
        supplierId: null,
        warehouseId: null,
      },
      // 仓库列表查询
      warehouseQuery: {
        page: 1,
        pageSize: 9999,
        name: "",
      },
      // 职员列表
      staffQuery: {
        page: 1,
        pageSize: 9999,
        name: "",
        mobile: "",
        parent: "",
      },

      total: 0, // 总条数
      listLoading: false, // 加载状态
      selectionRow: [], // 选中的行
      // 表单数据
      form: {
        id: undefined, // ID，用于区分新增/编辑
        directorId: undefined, // 主管ID
        goodsId: undefined, // 商品ID
        number: undefined, // 数量
        operatorId: "", // 操作人ID
        remark: "", // 备注
        status: undefined, // 状态
        warehouseId: undefined, // 仓库ID
      },
      // 表单验证规则
      rules: {
        directorId: [
          { required: true, message: "请选择主管", trigger: "change" },
        ],
        goodsId: [{ required: true, message: "请选择商品", trigger: "change" }],
        number: [{ required: true, message: "请输入数量", trigger: "blur" }],
        warehouseId: [
          { required: true, message: "请选择仓库", trigger: "change" },
        ],
      },
      dialogFormVisible: false,
      goodsList: [], // 商品列表
      warehouseList: [], // 仓库列表
      userList: [], // 用户列表
      demandList: [], // 需求列表
      dateRange: [], // 日期范围
      directorList: [], // 职员列表
      // 审核相关数据
      auditDialogVisible: false,
      // 审核表单
      auditForm: {
        id: null,
        result: 1,
        suggest: "",
        operatorId: "", // 操作人ID
      },
      auditRules: {
        result: [
          { required: true, message: "请选择审核结果", trigger: "change" },
        ],
        suggest: [
          { message: "请输入审核意见", trigger: "blur" },
          {
            min: 2,
            max: 200,
            message: "长度在 2 到 200 个字符",
            trigger: "blur",
          },
        ],
      },
      batchAuditDialogVisible: false,
      batchAuditForm: {
        ids: [],
        result: 1,
        suggest: "",
        operatorId: "",
      },
      directorLoading: false,
    };
  },
  computed: {
    dialogTitle() {
      return this.form.id ? "编辑" : "新增";
    },
  },
  created() {
    this.applyForList();
    this.selGoodsList();
    this.selWarehouseList();
    this.selStaffList();
  },
  methods: {
    // 获取列表数据
    async applyForList() {
      this.listLoading = true;
      try {
        const res = await selBusinessInspectListApi(this.listQuery);
        this.demandList = res.records || [];
        this.total = res.total || 0;
      } catch (error) {
        console.error("获取列表失败:", error);
        this.$message({
          type: "error",
          message: "获取列表失败: " + (error.message || "未知错误"),
        });
      } finally {
        this.listLoading = false;
      }
    },
    // 获取商品列表
    async selGoodsList() {
      const res = await selGoodsListApi(this.goodsQuery);
      this.goodsList = res.records || [];
    },

    // 获取仓库列表
    async selWarehouseList() {
      const res = await selWarehouseListApi(this.warehouseQuery);
      this.warehouseList = res.records || [];
    },
    // 负责人列表
    async selStaffList() {
      const res = await selStaffListApi(this.staffQuery);
      this.directorList = res.records || [];
    },
    // 日期改变
    handleDateChange(val) {
      if (val) {
        // 设置开始时间为当天的 00:00:00
        const startDate = new Date(val[0]);
        startDate.setHours(0, 0, 0, 0);
        this.listQuery.startTime = Math.floor(startDate.getTime() / 1000);

        // 设置结束时间为当天的 23:59:59
        const endDate = new Date(val[1]);
        endDate.setHours(23, 59, 59, 999);
        this.listQuery.endTime = Math.floor(endDate.getTime() / 1000);
      } else {
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }
    },
    handleStatusChange(val) {
      console.log(val);
      this.applyForList();
    },

    // 搜索
    handleFilter() {
      this.listQuery.page = 1;
      this.applyForList();
    },

    // 重置搜索
    resetFilter() {
      this.dateRange = [];
      this.listQuery = {
        directorId: null,
        endTime: "",
        goodsId: null,
        page: 1,
        pageSize: 10,
        startTime: "",
        status: null,
        warehouseId: null,
      };
      this.applyForList();
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.applyForList();
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.applyForList();
    },

    // 新增按钮点击
    handleAdd() {
      this.form = {
        id: undefined,
        directorId: undefined,
        goodsId: undefined,
        number: undefined,
        operatorId: "",
        remark: "",
        status: undefined,
        warehouseId: undefined,
      };
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["demandForm"].clearValidate();
      });
    },

    // 编辑按钮点击
    handleEdit(row) {
      this.form = {
        id: row.id,
        directorId: row.directorId,
        goodsId: row.goodsId,
        number: row.number,
        operatorId: row.operatorId,
        remark: row.remark,
        status: row.status,
        warehouseId: row.warehouseId,
      };
      this.dialogFormVisible = true;
    },
    // 负责人改变
    handleDirectorChange(val) {
      console.log(val);
      this.listQuery.page = 1;
      this.applyForList();
    },

    // 计算总数量
    calculateTotal() {
      this.totalQuantity = this.tableData.reduce((sum, item) => {
        return sum + (Number(item.quantity) || 0);
      }, 0);
    },

    // 表格复选框选择
    handleSelectionChange(selection) {
      this.selectionRow = selection;
      console.log("已选择的行:", selection);
    },

    // 点击审核按钮
    handleAudit(row) {
      this.auditForm = {
        id: row.id,
        result: 1,
        suggest: "",
        operatorId: "", // 可以从用户信息中获取
      };
      this.auditDialogVisible = true;
    },

    // 提交审核
    async submitAudit() {
      try {
        await this.$refs.auditForm.validate();

        const params = {
          id: Number(this.auditForm.id),
          result: Number(this.auditForm.result),
          suggest: this.auditForm.suggest,
          operatorId: this.auditForm.operatorId,
        };

        const res = await BusinessInspectByIdApi(params);

        if (res.code === 1) {
          this.$message({
            type: "success",
            message: "审核成功",
          });
          this.auditDialogVisible = false;
          this.applyForList();
        } else {
          this.$message({
            type: "error",
            message: res.msg || "审核失败",
          });
        }
      } catch (error) {
        if (error.message) {
          console.error("审核失败:", error);
          this.$message({
            type: "error",
            message: "审核失败: " + (error.message || "未知错误"),
          });
        }
      }
    },

    // 获取状态类型
    getStatusType(status) {
      if (status === 0) {
        return "warning"; // 待审核 - 黄色
      } else if (status >= 1) {
        return "success"; // 已审核 - 绿色
      } else if (status === -1) {
        return "danger"; // 未通过 - 红色
      }
      return "info";
    },

    // 获取状态文本
    getStatusText(status) {
      if (status === 0) {
        return "待审核";
      } else if (status >= 1) {
        return "已审核";
      } else if (status === -1) {
        return "未通过";
      }
      return "";
    },

    // 处理批量审核
    handleBatchAudit() {
      if (this.selectionRow.length === 0) {
        this.$message.warning("请至少选择一条记录");
        return;
      }

      // 重置批量审核表单
      this.batchAuditForm = {
        ids: this.selectionRow.map((item) => item.id),
        result: 1,
        suggest: "",
        operatorId: this.$store.getters.userId || "",
      };

      // 打开批量审核对话框
      this.batchAuditDialogVisible = true;
    },

    // 提交批量审核
    submitBatchAudit() {
      this.$refs.batchAuditForm.validate(async (valid) => {
        if (valid) {
          try {
            // 显示加载状态
            const loading = this.$loading({
              lock: true,
              text: "提交中...",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });

            // 准备请求数据
            const postData = {
              ids: this.batchAuditForm.ids,
              operatorId: this.batchAuditForm.operatorId,
              result: this.batchAuditForm.result,
              suggest: this.batchAuditForm.suggest,
            };

            console.log("批量审核请求数据:", postData);

            // 调用批量审核API
            const res = await ResourcesInspectByIdsApi(postData);

            loading.close();

            if (res && res.code === 1) {
              this.$message.success("批量审核成功");
              this.batchAuditDialogVisible = false;
              // 刷新列表
              this.applyForList();
              // 清空选择
              this.$refs.multipleTable.clearSelection();
            } else {
              this.$message.error(res?.msg || "批量审核失败");
            }
          } catch (error) {
            console.error("批量审核失败:", error);
            this.$message.error(`批量审核失败: ${error.message || "未知错误"}`);
          }
        }
      });
    },
    // 负责人选择获取焦点时加载数据
    onDirectorFocus() {
      this.directorLoading = true;
      this.remoteSearchDirectors("");
    },
    // 远程搜索负责人
    async remoteSearchDirectors(query) {
      try {
        const res = await selStaffListApi({
          page: 1,
          pageSize: 9999,
          name: query,
        });
        this.directorList = res.records || [];
      } catch (error) {
        console.error("搜索负责人失败:", error);
        this.$message.error("搜索负责人失败");
        this.directorList = [];
      } finally {
        this.directorLoading = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.search-wapper {
  margin-bottom: 15px;
}
.table-operations-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table-operations {
  margin-bottom: 15px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

.shopping-entry {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  align-items: center;
}

.entry-buttons {
  display: flex;
}

.circle-btn {
  margin-right: 10px;
  border-radius: 20px;
}

.attachment-info {
  display: flex;
  align-items: center;
}

/* 自定义下划线 */
.custom-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 13px 0;
}

.upload-link {
  margin-right: 15px;
}

.product-header {
  display: flex;
  align-items: center;
}

.required-mark {
  color: #f56c6c;
  margin-right: 4px;
}

.product-select {
  color: #409eff;
  cursor: pointer;
}

.product-image {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
}

.batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.batch-tag {
  background-color: #909399;
  color: white;
  font-size: 10px;
  padding: 0 4px;
  border-radius: 2px;
}

.info-header {
  display: flex;
  align-items: center;
}

.info-header .el-icon-question {
  margin-left: 4px;
  color: #909399;
  cursor: help;
}

/* 合计行 */
.summary-row {
  display: flex;
  background-color: #fdf6ec;
  padding: 10px 15px;
  font-weight: bold;
  border: 1px solid #ebeef5;
  border-top: none;
}

.summary-label {
  width: 50px;
}

/* 备注区域 */
.remark-container {
  margin-bottom: 20px;
}

/* 金额信息区域 */
.amount-container {
  margin-bottom: 20px;
}

.amount-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.amount-item {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 10px;
}

.amount-label {
  white-space: nowrap;
  margin-right: 5px;
  width: 80px;
  text-align: right;
}

.amount-input {
  width: 120px;
}

.amount-input.wider {
  width: 150px;
}

/* 底部工具栏 */
.footer-toolbar {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
}

.blue-text {
  color: #409eff;
}

.history-buttons .history-btn {
  margin-left: 10px;
}

.blue-radio.el-radio ::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #409eff;
}

.address-edit {
  margin-left: 5px;
  cursor: pointer;
  color: #409eff;
}

// 添加审核对话框样式
.dialog-footer {
  text-align: right;
  padding-top: 20px;
}

.el-textarea {
  width: 100%;
}

/* 商品明细样式 */
.goods-detail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  padding: 5px;
}

.goods-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.goods-item:last-child {
  border-bottom: none;
}

.goods-name {
  width: 120px;
  font-weight: 500;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 10px;
}

.goods-type {
  width: 120px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goods-number {
  width: 100px;
  color: #606266;

  .number-value {
    color: #409eff;
    font-weight: 500;
  }
}

.goods-money {
  width: 100px;
  color: #f56c6c;
  font-weight: 500;
}

.no-goods {
  color: #909399;
  padding: 10px 0;
}
</style>
